<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.content{
			position: relative;
			width:600px;
		}
		img{
			width: 600px;
			height: 400px;
		}
		.title{
			position: absolute;
			left:0;
			right: 0;
			height: 60px;
			bottom: 0;
			text-align: center;
			line-height: 60px;
			color: #fff;
			font-size: 32px;
		}
		.title_bg{
			background-color: #000;
			opacity: 0.2;
		}
		.title2{
			background-color: rgba(0,0,0,0.2);
		}
	</style>
</head>
<body>
	<div class="content">
		<img src="test1.jpg">
		<div class="title title_bg">这个是图片</div>
		<div class="title">这个是图片</div>
	</div>
	<div class="content">
		<img src="test1.jpg">
		<div class="title title2">这个是图片</div>
	</div>
</body>
</html>